<template>
  <div class="max">
    <my-header>
      <div slot="title">
        通讯录
      </div>
    </my-header>
    <div class="cont-nof tl phoneBook">
      <search-bar :value="params.name" @on-change="searchFn" @on-cancle="cancleFn" @on-clear="cancleFn"></search-bar>
      <div class="cont-nos">
        <div class="page__bd">
          <div class="weui-loadmore phone-tip" v-if="list.length===0">
            <img src="../../../static/img/phoneSearch.png" alt="">
            <div>
              请输入关键词进行搜索
            </div>
          </div>
          <div class="weui-cells" v-else style="width: 100%;">
            <div class="weui-cell" v-for="item in list">
              <img src="@/../static/img/icon26.png" alt="" style="width: 5rem;height: 5rem;margin-right: 1.5rem;">
              <div class="weui-cell__bd fl" style="font-size: 1.6rem;line-height: 4.5rem;">
                <p>{{item.name}}</p>
              </div>
              <div class="weui-cell__ft fr flex" style="font-size: 1.4rem;">
                <div class="fl">
                  {{item.phone|hide}}
                </div>
                <div class="fr flex phone_handle tc">
                  <a :href="'tel:' + item.phone" class="db_inline" style="width: 100%;">
                    <div class="handle_1">拨打</div>
                  </a>
                  <div class="handle_2" @click="viewPhone(item)" v-if="item.type==='student'">查看</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <my-foot tab="/phonebook"></my-foot>
    </div>
  </div>
</template>

<script>
  import myFoot from '@/components/Footer.vue'

  export default {
    components: {
      myFoot,
    },
    data() {
      return {
        params: {
          name: ''
        },
        index: 'teacher',
        list: [],
      }
    },
    filters: {
      ascii(val) {
        return String.fromCharCode(val + 64)
      },
      id(val) {
        return '#' + String.fromCharCode(val + 64)
      },
      hide(val) {
        return val.substr(0, 3) + '****' + val.substr(7);
      }
    },
    methods: {
      viewPhone(item) {
        this.$router.push({
          path: '/phoneCont',
          query: {id:item.id}
        })
      },
      clickNavbar(type) {
        this.index = type;
        this.queryFn();
      },
      cancleFn() {
        this.params.name = '1-1';
        this.queryFn();
      },
      searchFn(value) {
        if (!value) {
          value = "1-1";
        }
        this.params.name = value;
        this.queryFn();
      },
      queryFn() {
        this.$http.fetchAddressBook(this.params).then(resp => {
          this.list = resp.data;
        })
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
	.phoneBook {
		background: #FFFFFF;
	}

	.point {
		position: absolute;
		padding: 10rem 0.1rem;
		height: 70%;
		right: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0, 0, 0, 0.2);
		z-index: 999;
		border-radius: 10px;
		flex-direction: column;
		justify-content: space-between;
		font-size: 1.2rem;
	}

	.point a {
		color: #fff !important;
	}

	.phone-tip {
		padding-top: 6.5rem;
		box-sizing: border-box;
		font-size: 2rem;
		color: rgba(16, 16, 16, 1);
	}

	.phone-tip img {
		width: 21rem;
		margin-bottom: 2rem;
	}

	.phone_handle {
		flex-direction: column;
		align-items: center;
		margin-left: 1rem;
	}

	.phone_handle .handle_1,
	.phone_handle .handle_2 {
		width: 4rem;
		height: 2rem;
		line-height: 2rem;
		border-radius: 10px;
		background-color: rgba(68, 195, 69, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 1.2rem;
	}

	.phone_handle .handle_2 {
		background-color: #11ADFB;
		margin-top: 0.5rem;
	}
</style>
